<!-- 登录 -->
<template>
  <div id="logon">
    <div>
      <table style="margin: auto;">
        <tr>
          <td style="height: 80vh;">
            <el-card class="card">
              <img alt="" src="../assets/timg.gif" style="width: 60px; height: 60px">
              <h3>欢迎登录</h3>
              <div style="text-align: right; margin: 8px auto">
                <el-link type="primary" :disabled="isDisabled" @click="onSwitch">{{switchNames[loginWay-1]}}</el-link>
              </div>
              <div id="loginUser" v-show="loginWay===1">
                <el-form>
                  <el-form-item>
                    <el-input
                      v-model="user.account"
                      placeholder="用户名"
                      prefix-icon="el-icon-s-custom"
                      maxlength="11"
                      clearable
                      :disabled="isDisabled"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      v-model="user.password"
                      type="password"
                      placeholder="密码"
                      prefix-icon="el-icon-lock"
                      show-password
                      :disabled="isDisabled"
                    />
                  </el-form-item>
                </el-form>
              </div>
              <div id="loginSMS" v-show="loginWay===2">
                <el-form ref="form" :model="user">
                  <el-form-item>
                    <el-input
                      v-model="user.name"
                      placeholder="手机号"
                      prefix-icon="el-icon-phone"
                      :disabled="isDisabled"
                      maxlength="11"
                      v-model.number="user.account"
                      autocomplete="off"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      v-model="user.name"
                      placeholder="验证码"
                      prefix-icon="el-icon-message"
                      :disabled="isDisabled"
                      v-model.number="user.smscode"
                      maxlength="4"
                    >
                      <el-link slot="append" type="danger" :disabled="isDisabled">{{sendName}}</el-link>
                    </el-input>
                  </el-form-item>
                </el-form>
              </div>
              <div>
                <van-button class="btn" type="primary" size="normal" @click="onLogin()">{{loginName}}</van-button>
              </div>
            </el-card>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'logon',
  data () {
    return {
      user: {
        account: '18811110101',
        password: '123456',
        smscode: ''
      },
      loginWay: 1,
      sendName: '获取',
      loginName: '登录',
      isLoading: false,
      isDisabled: false,
      switchNames: ['短信登录', '账密登录']
    }
  },
  methods: {
    onSwitch () {
      if (this.loginWay === 1) {
        this.loginWay = 2
      } else {
        this.loginWay = 1
      }
    },
    setLoging (flag) {
      if (flag) {
        this.loginName = '登录中'
        this.isLoading = true
        this.isDisabled = true
      } else {
        this.loginName = '登录'
        this.isLoading = false
        this.isDisabled = false
      }
    },
    onLogin () {
      this.setLoging(true)
      this.$api.loginReq({
        account: this.user.account,
        password: this.user.password
      }).then(res => {
        this.setLoging(false)
        console.log('=============RES', res.token)
        this.$dataStore.setUser(res.userInfo)
      }).catch(err => {
        this.setLoging(false)
        console.log('登录失败:', err)
      })
    }
  }
}
</script>

<style scoped>
  #logon{
    background-color: cadetblue;
  }
   .card{
     min-width: 300px;
     width: 20vw;
   }
  .input {
    font-size: 16px;
    padding: 0px 0px 10px 0px;
  }
  .btn{
    background-color: #66CD00;
    width: 150px;
    border-radius: 5px;
  }
</style>
